<template>
  <div class="orderDetails">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('订单详情')}}</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="order_pane">
        <div>
          <img class="logo" :src="repaymentInfo.productLogo">
          <span class="productName">{{ repaymentInfo.appName }}</span>
        </div>
        <div class="status"
             :class="[{'status_repay':[5,6].indexOf(repaymentInfo.approvalResult) !== -1},{'status_review':[0,1].indexOf(repaymentInfo.approvalResult) !== -1},{'status_overdue':repaymentInfo.approvalResult === 8}]"
        >
         <div style="display: flex;align-items: center;">
           <img v-if="[0,1,5].indexOf(repaymentInfo.approvalResult) !== -1" style="vertical-align: middle" src="../../../assets/order/status_review.png">
           <img v-else style="vertical-align: middle" src="../../../assets/order/status_repay.png">
           <span style="margin-left: 5px">{{
               formatStatus(repaymentInfo.approvalResult)
             }}</span>
         </div>
        </div>
        <div class="order_pane_slider" :style="{backgroundColor:[5,6].indexOf(repaymentInfo.approvalResult) !== -1 ? '#3851EC' : '#FFAA00'}" >

        </div>
      </div>
      <div class="order_box">
        <div class="card_box">
          <div class="card_list">
            <!--        借款订单号-->
            <div class="card_item">
              <span class="title">{{ $t('订单号') }}</span>
              <span class="value">{{ $route.query.loanRecordId }}</span>
            </div>
            <!--        还款时间-->
            <div class="card_item" v-show="repaymentInfo.refundDate">
              <span class="title">{{ $t('还款时间') }}</span>
              <span class="value">{{ repaymentInfo.refundDate }}</span>
            </div>
            <!--        借款金额-->
            <div class="card_item" v-show="repaymentInfo.loanAmount">
              <span class="title">{{ $t('借款金额') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.loanAmount }}</span>
            </div>

            <!--        借款期限-->
            <div class="card_item" v-show="repaymentInfo.loanTerm ">
              <span class="title">{{ $t('借款期限') }}</span>
              <span class="value">{{ repaymentInfo.loanTerm }}{{ $t('天') }}</span>
            </div>
            <!--        服务费-->
            <div class="card_item" v-show="repaymentInfo.serviceFee">
              <span class="title">{{ $t('服务费') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.serviceFee }}</span>
            </div>
            <!--        利息-->
            <div class="card_item" v-show="repaymentInfo.shouldInterest">
              <span class="title">{{ $t('利息') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.shouldInterest }}</span>
            </div>
            <!--        到手金额-->
            <div class="card_item" v-show="repaymentInfo.paymentAmount">
              <span class="title">{{ $t('到手金额') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.paymentAmount }}</span>
            </div>
            <!--        申请日期-->
            <div class="card_item" v-show="repaymentInfo.loanTime">
              <span class="title">{{ $t('申请日期') }}</span>
              <span class="value">{{ $dateFormat(new Date(repaymentInfo.loanTime),'dd/mm/YYYY') }}</span>
            </div>
            <!--        放款时间-->
            <div class="card_item" v-show="repaymentInfo.paymentTime">
              <span class="title">{{ $t('放款时间') }}</span>
              <span class="value">{{ $dateFormat(new Date(repaymentInfo.paymentTime),'dd/mm/YYYY')  }}</span>
            </div>
            <!--        逾期费用-->
            <div class="card_item" v-show="repaymentInfo.totalOverdueFine">
              <span class="title">{{ $t('逾期费用') }}</span>
              <span class="value" style="color: red"><span>₱</span>{{ repaymentInfo.totalOverdueFine }}</span>
            </div>
            <!--        总应还金额-->
            <div class="card_item" v-show="repaymentInfo.shoulAmount">
              <span class="title">{{ $t('总应还金额') }}</span>
              <span class="value"><span>₱</span>{{ repaymentInfo.shoulAmount }}</span>
            </div>
            <!--        减免金额-->
            <div class="card_item" v-show="repaymentInfo.remissionAmount">
              <span class="title">{{ $t('减免金额') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.remissionAmount }}</span>
            </div>
            <!--        已还金额-->
            <div class="card_item" v-show="repaymentInfo.actualTotal">
              <span class="title">{{ $t('已还金额') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.actualTotal }}</span>
            </div>
            <!--        剩余应还金额-->
            <div class="card_item" v-show="repaymentInfo.notTotal">
              <span class="title">{{ $t('剩余应还金额') }}</span>
              <span class="value" style="color: #FDA003"><span>₱</span>{{ repaymentInfo.notTotal }}</span>
            </div>
            <!--        银行名称-->
            <div class="card_item" v-show="repaymentInfo.bankName">
              <span class="title">{{ $t('银行名称') }}</span>
              <span class="value">{{ repaymentInfo.bankName }}</span>
              <div class="clear_float"></div>
            </div>
            <!--        银行卡号-->
            <div class="card_item" v-show="repaymentInfo.bankNum">
              <span class="title">{{ $t('银行卡号') }}</span>
              <span class="value">{{ repaymentInfo.bankNum }}</span>
              <div class="clear_float"></div>
            </div>
          </div>
          <!-- 还款计划-->
          <div class="repay_plan" v-if="amortizationLoanList.length>0">
            <div class="header">
              Season 2   <span style="margin-left: 5px">180 days</span>
            </div>
            <div class="content">
              <div class="content_item" v-for="item in amortizationLoanList" :key="item.refundAmount">
                <div style="margin-bottom: 10px">
                  <span>Issue {{ item.seq }}</span> <span class="amount_repay">₱{{ item.refundAmount }}</span>
                </div>
                <div style="color: #BCBCBC">
                  <span>Repayment date</span> <span style="float: right">{{ item.refundDate }}</span>
                </div>
              </div>

            </div>
            <p class="repay_tips"><span style="color: red">*</span> If you pay off the first installment on time, the
              second installment will be waived</p>
          </div>
        </div>
      </div>

    </div>
    <div class="wrapper_button" v-show="repaymentInfo.approvalResult === 6 ||repaymentInfo.approvalResult === 8">
      <van-button @click="goDelay(repaymentInfo)" class="extend_btn"
                  round
                  v-show="$route.query.isRoll === '1'"
                  type="primary">{{ $t('展期') }}
      </van-button>
      <van-button class="repay_btn" type="primary"
                  round
                  @click="goRepayment(repaymentInfo)">{{
          $t('还款')
        }}
      </van-button>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue'
import { lookOrderDetails} from '@/api/order'
import router from '@/router/index'
import {useStore} from "vuex";
import {formatMoney, dateFormat, formatDate_EN} from "@/utils/tool";
import {useI18n} from 'vue-i18n'

export default {
  setup() {
    const statusList = ref([])
    const store = useStore()
    const isRollOver = ref(false)
    const isRepayment = ref(false)
    const isOrderSettle = ref(false)
    const isShowOrderBtn = ref(false)
    const {t} = useI18n()
    const amortizationLoanList = ref([])
    const {loanRecordId} = router.currentRoute.value.query
    const repaymentInfo = ref({})
    /**
     * 订单状态 (-1订单关闭,0,待审核1,审核中,2,拒绝,5,待放款,6待还款,8,逾期,9结清)
     * */
    const fetchOrderDetails = async () => {
      const res = await lookOrderDetails({loanRecordId})
      if (res.code === 1) {
        repaymentInfo.value = {
          ...res.data,
          loanTime: dateFormat(new Date(res.data.loanTime), 'YYYY-mm-dd'),
        }
        if (res.data.refundDate) {
          repaymentInfo.value['refundDate'] = dateFormat(new Date(res.data.refundDate), 'YYYY-mm-dd')
        }
        if (res.data.paymentTime) {
          repaymentInfo.value['paymentTime'] = dateFormat(new Date(res.data.paymentTime), 'YYYY-mm-dd')
        }
        amortizationLoanList.value = res.data.planList.map(item => {
          item.refundDate = formatDate_EN(new Date(dateFormat(new Date(item.refundDate), 'YYYY-mm-dd')))
          return item
        })
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    function formatStatus(value) {
      const obj = {
        '0': t('待审核'),
        '1': t('审核中'),
        '5': t('待放款'),
        '6': t('待还款'),
        '8': t('逾期')
      }
      return obj[value]
    }

    const goRepayment = (params) => {
      router.push({
        path: '/JkGQsgTJyZ',
        query: {
          loanRecordId: params.loanRecordId,
          appName: params.appName,
          type: 'repay'
        }
      })
    }
    const goDelay = (params) => {
      router.push({
        path: '/AAHdUmpZXl',
        query: {
          loanRecordId: params.loanRecordId,
          appName: params.appName,
          type: 'extend'
        }
      })
    }
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value)
      } else {
        return value
      }
    }

    onMounted(() => {
      fetchOrderDetails()
    })

    return {
      formatStatus,
      amortizationLoanList,
      isOrderSettle,
      statusList,
      goRepayment,
      goDelay,
      isRollOver,
      isShowOrderBtn,
      isRepayment,
      formatterMoney,
      repaymentInfo
    }
  }
}
</script>

<style scoped lang="less">
.repay_tips {
  color: #3851EC;
  font-size: 12px;
  padding: 10px;
}
.status_repay {
  color: #3851EC!important;
}

.status_review {
  color: #FF7805!important;
}
.orderDetails {
  overflow: auto;

  .wrapper {
    padding: 15px;
    margin-top: -150px;
    .order_pane{
      width: 100%;
      height: 130px;
      background-image: url('../../../assets/order/order_pane1.png');
      background-size: 100% 100%;
      position: relative;
      padding: 10px;
      box-sizing: border-box;
      .order_pane_slider{
        position: absolute;
        border-radius: 12px;
        background-color: #FFAA00;
        bottom: 20px;
        width: 325px;
        height: 20px;
      }
      .logo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
      }

      .productName {
        vertical-align: middle;
        font-size: 18px;
        margin-left: 5px;
      }
      .status {
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        padding: 5px 10px;
        border-radius: 6px;
        text-align: center;
        font-size: 18px;
        background-color: #FFFFFF;
        width: 130px;
        line-height: 25px;
      }
    }
    .order_box{
      padding: 0 20px;
      margin-top: -30px;
    }
  }

  .card_box {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    padding: 10px;
    background: linear-gradient( 180deg, #9FE3E3 0%, #FFFFFF 5%);
    .product_info {
      font-size: 16px;
      position: relative;
      box-sizing: border-box;
      padding: 0 15px;
      border-radius: 10px;
      margin-bottom: 10px;
      text-align: center;


    }

    .repayment_loan {
      padding: 15px 10px;
      font-size: 16px;
      border-bottom: 1px solid #DEDEDE;
    }

    .card_header {
      border-bottom: 1px solid #E6E6E6;
      font-size: 16px;
      color: #666666;
      padding-bottom: 10px;
    }


    .repay_plan {
      margin-top: 10px;
      font-size: 16px;
      position: relative;
      .header {
        border-radius: 10px;
        padding: 10px 0;
        color: #15B3B2;
      }
      .content {
        background-color: #FFFFFF;

        .content_item {
          padding: 15px 0;

          .amount_repay {
            float: right;
            color: #FAC816;
          }
        }
      }

    }

    .card_item {
      padding: 12px 0;
      font-size: 14px;

      .title {
        color: #999999;
      }

      .value {
        float: right;
        flex: 1;
        color: #333333;
      }
    }
  }


  .extend_btn {
    background-color: transparent;
    color: #15B3B2;
    border: 1px solid #15B3B2;
    margin-right: 20px;
    padding: 0 20px;
    font-size: 18px;
    position: relative;
  }

  .repay_btn {
    font-size: 18px;
  }

  .wrapper_button {
    box-sizing: border-box;
    width: 100%;
    bottom: 0px;
    padding: 15px 15px 30px 15px;
    text-align: center;
  }
}
</style>
